<script setup lang="ts">
  import { useGetSettleInfo } from '@/service/order'
  import { ref } from 'vue'
  import pdf from '@/assets/image/pdf.png'
  import { ArrowLeftBold, ArrowRightBold, View } from '@element-plus/icons-vue'

  const { orderSettleInfo, getOrderSettleInfo } = useGetSettleInfo()

  const props = defineProps({
    status: {
      type: Number,
      required: true,
    },
  })

  const settlementFields = ref([])

  // 附件查看弹窗显示状态
  const dialogContract = ref(false)

  // 查看的插件
  const file = ref('')

  /**
   * 查看附件事件
   * @param {String} src - 附件
   */
  const lookFile = (src) => {
    dialogContract.value = true
    file.value = src
  }

  // 视频预览弹窗显示状态
  const videoPreviewModalVisible = ref(false)

  // 视频预览地址
  const videoPreviewUrls = ref<Array<string>>([])

  // 视频索引，用来标记当前的视频是第几个
  const videoPreviewIndex = ref(0)

  /**
   * 视频预览事件
   * @param {string} url - 视频预览地址
   * @param {number} index - 索引
   */
  const handlePreviewVideo = (url: Array<string>, index: number) => {
    videoPreviewModalVisible.value = true
    videoPreviewUrls.value = url
    videoPreviewIndex.value = index
  }

  /**
   * 视频预览弹窗关闭事件
   */
  const onCloseVideoPreviewModal = () => {
    videoPreviewModalVisible.value = false
    videoPreviewUrls.value = []
    videoPreviewIndex.value = 0
  }

  defineExpose({
    getOrderSettleInfo: (id: string) => {
      getOrderSettleInfo(id).then(() => {
        let customFieldTxt = []
        let customFieldMultiImg = []
        let customFieldScore = []
        let customFieldVideo = []
        let customFieldFile = []

        settlementFields.value = orderSettleInfo.value.map((o) => {
          o.fieldVals.forEach((field) => {
            if ([1, 2, 3, 4].includes(field.type)) {
              customFieldTxt.push(field)
            }
            if (field.type === 5) {
              customFieldMultiImg.push(field)
            }
            if (field.type === 8) {
              customFieldScore.push(field)
            }
            if (field.type === 7) {
              customFieldVideo.push(field)
            }
            if (field.type === 6) {
              customFieldFile.push(field)
            }
          })
          return {
            template: o.template,
            customFieldTxt: customFieldTxt,
            customFieldMultiImg: customFieldMultiImg,
            customFieldScore: customFieldScore,
            customFieldVideo: customFieldVideo,
            customFieldFile: customFieldFile,
          }
        })
      })

      console.log(settlementFields.value)
    },
  })
</script>

<template>
  <div class="order-settle-info">
    <div
      class="content"
      v-if="settlementFields.length > 0 && (props.status === 3 || props.status === 4)"
    >
      <div class="title">结单信息</div>
      <el-form label-width="auto" class="box_info">
        <div class="info" v-for="(o, indexV) in settlementFields" :key="indexV">
          <div class="right">
            <p class="tip_title">{{ o.template }}</p>
            <template v-if="o.customFieldTxt.length > 0">
              <el-form-item
                :label="`${item.name}:`"
                class="info_item"
                v-for="item in o.customFieldTxt"
                :key="item.id"
              >
                <div class="value">{{ item.optVos.map((o) => o.optValue).join('、') }}</div>
              </el-form-item>
            </template>
            <template v-if="o.customFieldMultiImg.length > 0">
              <el-form-item
                :label="`${img.name}:`"
                class="info_item"
                style="margin-top: 8px"
                v-for="img in o.customFieldMultiImg"
                :key="img.id"
              >
                <div class="value" style="width: 100%">
                  <el-scrollbar>
                    <div class="scrollbar-container">
                      <div class="img" v-for="(item, index) in img.optVos" :key="index">
                        <el-image
                          class="img_"
                          :src="item.optValue"
                          :initial-index="index"
                          :preview-src-list="img.optVos.map((o) => o.optValue)"
                          fit="scale-down"
                          lazy
                          loading="lazy"
                        />
                      </div>
                    </div>
                  </el-scrollbar>
                </div>
              </el-form-item>
            </template>
            <template v-if="o.customFieldFile.length > 0">
              <el-form-item
                :label="`${file.name}:`"
                class="info_item"
                style="margin-top: 8px"
                v-for="file in o.customFieldFile"
                :key="file.id"
              >
                <div class="value" style="width: 100%">
                  <el-scrollbar>
                    <div class="scrollbar-container">
                      <div class="file" v-for="(item, index) in file.optVos" :key="index">
                        <el-image class="file_" :src="pdf" fit="scale-down" lazy loading="lazy" />
                        <div class="view" @click="lookFile(item.optValue)">
                          <el-icon color="#fff" size="18" style="cursor: pointer">
                            <View />
                          </el-icon>
                        </div>
                      </div>
                    </div>
                  </el-scrollbar>
                </div>
              </el-form-item>
            </template>
            <template v-if="o.customFieldVideo.length > 0">
              <el-form-item
                :label="`${video.name}:`"
                class="video_container"
                style="margin-top: 8px"
                v-for="(video, videoIndex) in o.customFieldVideo"
                :key="videoIndex"
              >
                <el-scrollbar style="width: 100%">
                  <div class="value">
                    <div class="video_item" v-for="(item, index) in video.optVos" :key="index">
                      <div class="video_item_content">
                        <video :src="item.optValue" width="50" height="30"></video>
                        <div
                          class="view"
                          @click="
                            handlePreviewVideo(
                              video.optVos.map((o) => o.optValue),
                              index,
                            )
                          "
                        >
                          <el-icon color="#fff" size="18" style="cursor: pointer">
                            <View />
                          </el-icon>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-scrollbar>
              </el-form-item>
            </template>
          </div>
        </div>
      </el-form>
    </div>

    <!-- 文件查看 -->
    <el-dialog title="查看附件" v-model="dialogContract">
      <iframe :src="file" width="100%" height="100%" style="height: 700px" frameborder="0"></iframe>
    </el-dialog>

    <!--视频预览弹窗-->
    <el-dialog
      @close="onCloseVideoPreviewModal"
      v-model="videoPreviewModalVisible"
      title="视频预览"
    >
      <div style="display: flex; align-items: center; gap: 12px; justify-content: center">
        <el-button
          type="primary"
          :disabled="videoPreviewIndex === 0"
          @click="videoPreviewIndex--"
          :icon="ArrowLeftBold"
          style="padding: 0 14px"
        />
        <video :src="videoPreviewUrls[videoPreviewIndex]" controls width="500"></video>
        <el-button
          type="primary"
          :disabled="videoPreviewIndex === videoPreviewUrls.length - 1"
          @click="videoPreviewIndex++"
          :icon="ArrowRightBold"
          style="padding: 0 14px"
        />
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
  @import './SettleInfo.scss';
</style>
